<template>
	<view class="scroll-view_H">
		<scroll-view scroll-y="true" refresher-enabled="true" :refresher-triggered="triggered"
			refresher-background="#eaeaea" @refresherpulling="onPulling" @refresherrefresh="onRefresh" class="scroll-view_box"
			@refresherrestore="onRestore" @refresherabort="onAbort">
			<slot></slot>
		</scroll-view>
	</view>
</template>

<script setup>
const pullingDistance = ref(0);
const maxPullingDistance = 100;// 最大下拉距离
const triggered = ref(false)
const props = defineProps({

})
const onPulling = (e) => {
	console.log(e);
	pullingDistance.value = e.detail.deltaY;
	uni.showToast({
		title: '我触发了下拉'
	})
	if (pullingDistance.value >= maxPullingDistance) {
		// 阻止继续下拉
		pullingDistance.value = maxPullingDistance;
	}
	setTimeout(() => {
		// 假设刷新成功，重置状态
		triggered.value = false;
		pullingDistance.value = 0;
	}, 5000);
}
const onRefresh = (e) => {

	uni.showToast({
		title: '我刷新完成'
	})
	// 假设刷新成功，重置状态
	triggered.value = 'restore';
	// 需要重置

}
//下拉复位
const onRestore = (e) => {
	console.log(e, '11');
}
//下拉中止
const onAbort = (e) => {
	uni.showToast({
		title: '别打断我学习'
	})

}


</script>

<style lang="scss" scoped>
.scroll-view_H {
	height: 100%;

}
</style>